<template>
    <div class="layout">
        <div class="layout-menu-left">
            <div class="layout-profile">
                <img src="../assets/logo.png">
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                      {{userName}}<i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item command="editPwd">修改密码</el-dropdown-item>
                        <el-dropdown-item command="exit" divided>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <el-menu default-active="1" :router=true :unique-opened=true class="el-menu-root" :collapse="isCollapse">
                <el-menu-item index="/"><i class="fa fa-home"></i><span>首页</span></el-menu-item>
                <el-submenu index="/info" v-permission="'info'">
                    <template slot="title"><i class="fa fa-fw fa-windows"></i><span>基础管理</span></template>
                    <el-menu-item index="/info/agent/list">商户管理</el-menu-item>
                </el-submenu>
                <el-submenu index="/finance" v-permission="'finance'">
                    <template slot="title"><i class="fa fa-fw fa-windows"></i><span>财务管理</span></template>
                    <el-menu-item index="/finance/recharge/list">充值管理</el-menu-item>
                </el-submenu>
                <el-submenu index="/system" v-permission="'system'">
                    <template slot="title"><i class="fa fa-fw fa-windows"></i><span>系统管理</span></template>
                    <el-submenu index="/system/admin" v-permission="'system:admin'">
                        <template slot="title"><span>运营后台管理</span></template>
                        <el-menu-item index="/system/admin/user/list">用户管理</el-menu-item>
                        <el-menu-item index="/system/admin/role/list">角色管理</el-menu-item>
                        <el-menu-item index="/system/admin/menu/list">菜单管理</el-menu-item>
                        <el-menu-item index="/system/admin/office/list">部门管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="/agent" v-permission="'system:agent'">
                        <template slot="title"><span>商户后台管理</span></template>
                        <el-menu-item index="/system/agent/user/list">用户管理</el-menu-item>
                        <el-menu-item index="/system/agent/role/list">角色管理</el-menu-item>
                        <el-menu-item index="/system/agent/menu/list">菜单管理</el-menu-item>
                        <el-menu-item index="/system/agent/office/list">部门管理</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </div>
        <div class="layout-page" id="layout-page">
            <div class="layout-top">
                <div class="layout-top-left">
                    <a @click="expand"><i class="fa fa-bars"></i></a>
                </div>
                <div class="layout-top-right">
                    <a href="#" @click="exit"><i class="fa fa-sign-out"></i>退出</a>
                </div>     
            </div>
            <div class="layout-page-content" v-loading="loading">
                <transition name="vux-pop-in" mode="out-in" appear>
                    <router-view></router-view>
                </transition>
            </div>
        </div>
    </div>
</template>

<script>
    import permission from '../directives/permission/index'

    export default {
        directives: {
            permission
        },
        data () {
            return {
                dropdownIcon: 'el-icon-caret-bottom',
                userName: '',
                scrollMaxHeight: '',
                isCollapse: false
            }
        },
        computed: {
            loading () {
                return store.state.requestCount > 0
            }
        },

        methods: {
            exit() {
                Lockr.flush();
                router.push('/login')
            },
            handleCommand(command){
                if (command == 'exit') {
                    Lockr.flush();
                    router.push('/login')
                }
                if (command == 'editPwd') {
                    router.push('/editPassword');
                }
                if (command == 'info') {
                    router.push('/editInfo');
                }
            },
            expand(){
                this.isCollapse = !this.isCollapse
                if(this.isCollapse){
                    document.getElementById('layout-page').style.left = '60px'
                }
                else{
                    document.getElementById('layout-page').style.left = '200px'
                }
            },
            init(){
                api.request('api/system/user/get', {id: Lockr.get("id")}, (res)=> {
                    this.userName = res.data.user_name;
                });
            }
        },
        mounted(){

        },
        created() {
            //this.userName = Lockr.get("userName")
            //this.init()
        }
    }
</script>

<style scoped>
    .fa{
        font-size: 18px;
        margin-right: 10px;
    }
    .el-menu-item{
        font-size: 15px;
    }
</style>

<style>
    .el-menu-root:not(.el-menu--collapse){
        width: 200px;
        min-height: 400px;
    }

    .layout-menu-left {
        width: 200px;
        min-height: 400px;
        background-color: #2f4050;
    }

    .layout-profile {
        background-color: #263949;
        text-align: center;
        padding: 25px 0px;
    }

    .layout-profile > img {
        width: 80px;
        height: 80px;
        display: block;
        margin: 0 auto;
    }

    .layout-profile .el-dropdown {
        color: #ccc;
    }

    .layout-page {
        position: absolute;
        top: 0px;
        right: 0px;
        left: 200px;
        bottom: 0px;
        /*min-height: 950px;*/
        overflow-y: auto;
        background-color: #f3f3f4;
    }

    .layout-top {
        line-height: 50px;
        height: 50px;
        padding: 0px 15px;
    }

    .layout-top-left{
        float: left;
    }

    .layout-top-right{
        float: right;
    }

    .layout-top a {
        color: #999c9e;
        text-decoration: none;
        font-weight: bold;
        font-size: 15px;
        display: inline-block;
        padding: 0px 15px;
        position: relative;
        cursor: pointer;
    }

    .layout-top a i {
        margin-right: 5px;
    }

    .layout-top a span {
        position: absolute;
        top: 5px;
        right: 2px;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #fff;
        background-color: #19aa8d;
    }

    .layout-top a.active, .layout-top a:hover {
        background-color: #ececec;
    }

    .layout-page-content {
        padding: 0px 15px 15px;
    }

    .layout-page-content.offset {
        margin-right: 260px;
    }

    .layout-page-right {
        width: 260px;
        position: absolute;
        background-color: #fff;
        top: 50px;
        right: 0;
        bottom: 0;
        border-left: solid 1px #f3f3f4;
    }

    .layout-page-heading {
        background-color: #fff;
        margin: 0px -15px;
        padding: 10px 25px 15px;
    }

    .layout-page-heading h3 {
        margin: 0;
        line-height: 45px;
        font-weight: normal;
    }

    .layout-page-heading-action {
        margin-top: 15px;
        text-align: right;
    }

    .layout-page-box {
        background-color: #ffffff;
        padding: 15px 20px 20px 20px;
        margin: 15px 0px;
        border: 1px solid #eaeefb;
        border-radius: 4px;
        transition: .2s;
    }

    .layout-page-box:hover {
        box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
    }

</style>
